<template>
    <el-form :model="form" label-width="120px">
    <el-form-item label="Activity name">
      <el-input v-model="form.name" />
    </el-form-item>
    
    <el-form-item>
      <el-button type="primary" @click="onSubmit">Create</el-button>
      <el-button>Cancel</el-button>
    </el-form-item>
  </el-form>

    <div style="border: 1px solid #ccc">
        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" />
        <Editor style="height: 300px; overflow-y: hidden;" v-model="valueHtml" @onCreated="handleCreated" />
        <!--  onCreated 编辑器创建完毕时的回调函数，
        当这个实例，这个富文本成功渲染之后，他有回调函数，把editor赋给editorRef-->
        <!-- onChange 编辑器内容、选区变化时的回调函数 -->
    </div>

    <button @click="getHtml">获取Html</button>

</template>
<script setup lang="ts">
import { ref, shallowRef } from "vue";

import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
//编辑器实例，必须用 shallowRef
// 页面先加载 组件再一点点渲染，渲染之后，才会拿到editorRef,可以理解为延迟加载，具有延迟性
const editorRef = shallowRef()
const valueHtml = ref('')//直接就可以说这个定义的变量里面的值为空的字符串
const handleCreated = (editor: any) => { 
    editorRef.value = editor // 记录 editor 实例，重要！
}
//编辑器结束
//获取编辑器html内容
const getHtml = ()=>{
   console.log(valueHtml.value);
//    console.log(editorRef.value.getHtml());
// 两种方法都可以
}
</script>